<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>网络安全</title>
    <meta name="keywords" content="网络安全">

    <link th:href="@{css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{css/btnStyle.css}" rel="stylesheet">
    <link th:href="@{css/animate.css}" rel="stylesheet">
    <link th:href="@{css/index_002.css}" rel="stylesheet">
    <link th:href="@{css/zoomify.css}" rel="stylesheet">
    <link th:href="@{css/breakingnews.css}" rel="stylesheet">
    <!--Announced by Visual SiteBuilder 9-->
    <link rel="stylesheet" type="text/css" th:href="@{css/_sitegray_d.css}">
    <script language="javascript" th:src="@{js/_sitegray.js}"></script>
    <!-- CustomerNO:77656262657232300201465c -->
    <link rel="stylesheet" type="text/css" th:href="@{css/index.css}">
    <script type="text/javascript" th:src="@{js/counter.js}"></script>
    <script type="text/javascript">
        _jsq_(1001, '/index.jsp', -1, 1213653725)
    </script>
    <link rel="shortcut icon" th:href="@{images/favicon.ico}" />
</head>

<body>
<canvas id="canvas" width="1536" height="722"></canvas>
<div class="height-100">
    <div class="mainPage">
        <div class="navigation-bar">
            <!--左侧logo-->
            <a th:href="@{/}">
                <div class="navigation-logo">
                    <img th:src="@{images/logo01.png}" height="80px" width="200px">
                </div>
            </a>
            <!--右侧搜索框-->
            <div class="navigation-search">
                <form class="parent" id="formtest" method="get" action="/search"><!---->
                    <input type="text" class="search" v-model="keyword" autocomplete="off" id="keyword"
                           aria-haspopup="true" placeholder="网络安全" name="keyword">
                    <input type="submit" id="searchbtn" value="提交" class="btn" onclick="searchKey()">
                </form>
            </div>
        </div>
        <div class="mainCont">
            <img class="img-max-widtd position-r" src="images/banner7.jpg" onclick="javascript:;"
                 style="width: 100%;height: 200px;">
            <div class="menu-title">
                <div class="text-center color-white font-size-20 animated infinite ">网络安全为人民，网络安全靠人民</div>
            </div>
        </div>
        <!--列表展示热点新闻-->
        <div class="news">
            <h1>最新消息</h1>
        </div>
        <!--新闻展示页面-->
        <div class="wrap" id="wrap">
            <div class="main clearfix">
                <div class="result" id="result">
                    <div class="box-result clearfix" data-sudaclick="blk_result_index_3" v-for="result in resultList">
                        <h2><a :href="result.link" target="_blank">{{result.title}}</a>
                            <span class="fgray_time">{{result.time}}</span></h2>
                        <div class="r-img">
                            <a :href="result.link" target="_blank" class="a-img">
                                <img alt="" class="left_img" :src="result.imgIlink" width="120">
                            </a>
                        </div>
                        <div class="r-info">
                            <p class="content">
                                {{result.content}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" th:src="@{js/jquery.js}"></script>
<script type="text/javascript" th:src="@{js/zoomify.js}"></script>
<script type="text/javascript" th:src="@{js/bootstrap.js}"></script>
<script type="text/javascript" th:src="@{js/vue.js}"></script>
<script type="text/javascript" th:src="@{js/canvas.js}"></script>
<script th:src="@{/js/axios.min.js}"></script>
<script th:src="@{/js/vue.min.js}"></script>
<script>
    $('.list-i img').zoomify();

    function openNav() {
        document.getElementById("myNav").classList.toggle("menu_width");
        document
            .querySelector(".custom_menu-btn")
            .classList.toggle("menu_btn-style");
    }

    function searchKey(){
        var parm1=document.getElementById("keyword").value;
        var href = '/search/'+parm1;
        // alert(href);
        window.location.href = href;
    }

    new Vue({
        el: '#result',
        data: {
            resultList: [],
        },
        created() {
            this.todayList();
        },
        methods: {
            todayList() {
                axios.get('/today/list/1/18').then(
                    response => {
                        this.resultList = response.data
                    }
                )
            }
        }
    })
</script>


</body>

</html>